<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM的增删改</title>
        <script type="text/javascript">
            window.onload = function()
            {

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");

                myClick("btn01", function()
                {
                    //创建一个子节点
                    var li = document.createElement("li");
                    //创建一个子节点文本
                    var NJText = document.createTextNode("南京");
                    //将文本设置为子节点的子物体
                    li.appendChild(NJText);

                    var city = document.getElementById("city");
                    city.appendChild(li);
                });

                myClick("btn02", function()
                {
                    var li = document.createElement("li");
                    var NJText = document.createTextNode("南京");
                    li.appendChild(NJText);

                    //插入到XX之前
                    city.insertBefore(li, bj);
                });

                myClick("btn03", function()
                {
                    var li = document.createElement("li");
                    var NJText = document.createTextNode("南京");
                    li.appendChild(NJText);

                    //替换节点
                    city.replaceChild(li, bj);
                });

                myClick("btn04", function()
                {
                    var li = document.createElement("li");
                    var NJText = document.createTextNode("南京");
                    li.appendChild(NJText);
                    
                    //删除子节点
                    city.removeChild(bj);
                });

                myClick("btn05", function()
                {
                    alert(city.innerHTML);
                });
            };

            function myClick(idStr, fun)
            {
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            }
        </script>
    </head>

    <body>
        <div id total>
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>
                <ul id="city">
                    <li id="bj">北京</li>
                    <li>上海</li>
                    <li>广州</li>
                    <li>深圳</li>
                </ul>
            </div>
        </div>

        <div id="btnList">
            <div><button id="btn01">创建一个"南京"节点，添加到#city下</button></div>
            <div><button id="btn02">将"南京"节点插入到#bj前面</button></div>
            <div><button id="btn03">使用"常州"节点替换#bj节点</button></div>
            <div><button id="btn04">删除#bj节点</button></div>
            <div><button id="btn05">读取#city内的HTML代码</button></div>
            <div><button id="btn06">设置#bj的HTML代码</button></div>
        </div>
    </body>
</html>